<template>
  <div class="home">
    <header>
      <div class="up">
        <h1>饿了么</h1>
        <div class="up-center">
          <section><span class="iconfont icon-icon-test"></span></section>
          <section><span class="iconfont icon-guanbi"></span></section>
        </div>
      </div>
      <!-- 搜索框 -->
     <van-search
        v-model="seachkey"
        input-align="center"
        shape="round"
        background="#0099ff"
        placeholder="输入商家，商品名称"
        @click="go"
      />
  </header>
    <!--轮播图 -->
<main> 
   <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in bannerlist" :key="index">
        <img :src="item.bannerUrl" alt="">
      </van-swipe-item>
    </van-swipe>
   
    <!--依需选择-->
<div class="btn-box">
    <h3>猜你喜欢</h3>
      <div class="like">
        <ul>
          <li :class="{ active: currentIndex === index }" @click="highlight(index)" v-for="(item, index) in btnArr" v-bind:key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <section class="banner">
        <ul>
          <li>年度节热卖</li>
          <li>津贴联盟</li>
          <li>满减优惠</li>
          <li>品质联盟</li>
        </ul>
      </section>
</div>
<!-- 商品列表 -->
      
    <div class="shoplist">
<!-- v-model绑定的布尔值 -->
 <van-pull-refresh v-model="refreshing" :head-height="80" @refresh="onRefresh"> 

  <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我也是有底线的!"
          @load="onLoad"
        >
  <div class="shop" @click="$router.push('/detail/'+item.mtWmPoiId)" v-for="(item,index) in shoplist" :key="index">
        <div class="img-box">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="text">
          <div class="name">{{ item.name }}</div>
          <div class="price">
        {{ item.monthSalesTip }} {{ item.averagePriceTip }}
          </div>
          <div class="new">
          <div class="desc">
            {{ item.minPriceTip }} {{ item.shippingFeeTip }}
          </div>
          <div class="time">
            {{ item.deliveryTimeTip }} {{ item.distance }}
          </div>
           </div>
       <div class="discounts">
              <ul>
                <li v-for="(tag, index) in item.discounts2" :key="index">
                  {{ tag.info }}
                </li>
              </ul>
            </div> 
        </div>
        </div>
 </van-list> 
 </van-pull-refresh>
    </div>
  
    </main>    
  </div>

</template>
<script>
import { shop_list } from "../../utils/api"
import { banner_list } from '../../utils/api'

export default {
  data() {
    return {
       //保存搜索关键字
    seachkey:'',
    currentIndex: 0,//记录最新点击的按钮下标
      btnArr: ["综合排序﹀", '距离最近', '销量最高', '筛选'],
      value: "",
      bannerlist:[],//轮播图数据
      shoplist: [],//列表渲染数据
      loading:false,
      finished:false,
      refreshing:false,
      page:1.//页码
  
    }
  },
   mounted() {
  
   banner_list().then((res)=>{
     /*  console.log(res.data) */
     this.bannerlist = res.data.list;
    })
    shop_list().then((res) => {
 /*      console.log(res.data.list[0]); */
      this.shoplist = res.data.list;
    })
   },
   methods:{
     go(){
      this.$router.push("/search")
     },
     highlight(index){
            this.currentIndex = index;//保存当前点击的按钮下标
            // 距离排序
            if (index === 1) {
                this.shoplist.sort((a,b)=>{
                   return a.distance.slice(0,length-2) - b.distance.slice(0,length-2);
                })
            }
            // 销量排序
            if (index === 2) {
                this.shoplist.sort((a,b)=>{
                    return b.monthSalesTip.slice(2,length-1)-a.monthSalesTip.slice(2,length-1)
                })
            }
        },
    onLoad(){
      this.loading = true; //显示loading
      //发请求,获取下一页店铺数据
      shop_list({page:this.page+1}).then((res)=>{
        if( res.data.list.length > 0 ){
          this.shoplist = [...this.shoplist,...res.data.list];
          this.loading = false;//隐藏loading
          this.page = this.page+1;
        }else{
          this.finished = true;
        }
      })
    },
    onRefresh(){
      this.refreshing = true;//显示下拉刷新动画
      //发请求,获取下一页店铺数据
      shop_list({page:this.page+1}).then((res)=>{
        this.shoplist = res.data.list;
        this.refreshing = false;//显示下拉刷新动画
      })
    }
  }
}
</script>
<style lang="scss">
.home {
  header {
  height: 100px;
  background-color: #0099ff;
  position: sticky;
  top: 0;
  .up {
  height:45px;
  display: flex;
  justify-content: space-between;
}
 .up h1 {
  padding-top: 20px;
  padding-left: 15px;
  font-size: 18px;
  color: white;
}
.up-center {
  width: 80px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  margin-top: 20px;
  margin-right: 10px;
  color: #fff;
}

.up section {
  width: 65px;
  height: 30px;
}
.down input {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  outline: none;
  border: none;
  text-align: center;
  position: relative;
  margin-left: 10px;
}

.down span {
  display: inline-block;
  position: absolute;
  left: 79px;
  top: 54px;
}
}
  .btn-box{
    h3 {
  margin: 15px 0px 15px 13px;
  font-size: 19px;
}

.like > ul {
  display: flex;
  justify-content: space-around;
}

.like > ul .active {
  font-weight: 900;
}

.banner ul {
  display: flex;
  justify-content: space-evenly;
  margin-top: 15px;
}

.banner ul li {
  width: 85px;
  height: 30px;
  background-color: #efecec;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}

  }
  .my-swipe{
    height: 100px;
     img{
    width: 100%;
  }
}
main{
  flex: 1;
 overflow-y: scroll;
 height: 500px;
  .shoplist {
    margin: 10px;
    margin-bottom: 60px;
    .shop {
      display: flex;
      margin-bottom: 10px;
      .img-box {
        width: 100px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .text {
        flex: 1;
        .name{
          font-size: 18px;
        }
          .price{
             margin-top:5px;
          }

        .price,
        .new{
          font-size: 14px;
          color: grey;
        }
        .new{
          margin-top:5px;
          display: flex;
          justify-content: space-between;
        }
        .discounts{
           margin-top:5px;
        }
.discounts ul {
  display: flex;
  justify-content: space-between;
}

.discounts ul li {
  height:15px;
  border: 1px solid red;
  color: red;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 5px;
  overflow: hidden;
}
      }
    }
  }
 
}
 
}
</style>